<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="libs/scrollReveal/scrollreveal.min.js"></script>
    <!-- font-awesome库 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.css" />
    <link rel="stylesheet" href="libs/glide/glide.core.min.css" />
    <link rel="stylesheet" href="libs/glide/glide.theme.min.css" />
    <link rel="stylesheet" href="style.css" />
    <link rel="icon" href="images/logo.png" sizes="32x32" />
    <title>Zichen | Man Is Here For The Sake of Other Men
    </title>
</head>
<body>
    <!-- 页眉 -->
    <header>
        <div class="logo">Zichen</div>
        <!-- 导航菜单 -->
        <nav>
            <a href="https://www.libeilin.top" target="_blank">797</a></li>
            <a href="https://blog.csdn.net/weixin_48430685" target="_blank">CSDN</a></li>
            <a href="https://www.icourse163.org" target="_blank">MOOC</a></li>
            <a href="https://www.imooc.com/" target="_blank">慕课网</a></li>
            <a href="https://cn.vuejs.org/v2/guide/" target="_blank">Vue.js</a></li>
            <a href="https://jquery.cuishifeng.cn" target="_blank">jQuery|API</a></li>
            <a href="https://github.com/zichenlbl" target="_blank">GitHub</a></li>
            <a href="https://support.qq.com/products/287956" target="_blank">讨论区</a></li>
        </nav>
    </header>
    <!-- 页眉 -->

   
    <!-- 轮播图 -->
    <div class="glide" id="home">
        <!-- 轮播轨道 -->
        <div class="glide__track" data-glide-el="track">
            <!-- 轮播容器 -->
            <div class="glide__slides">
                <!-- 轮播元素1 -->
                <div class="glide__slide">
                    <!-- 自定义轮播的内容 -->
                    <!-- 大标题 -->
                    <div class="slide-caption">
                        <h1>Zichen</h1>
                        <h3>Hello World!</h3>
                        <button class="explore-btn" onclick="alert('开始学习')">点击开启</button>
                    </div>
                    <!-- 图片上方遮罩灰色使文字显示清晰 -->
                    <div class="backdrop"></div>
                    <!-- 轮播图片 -->
                    <img src="images/glide-01.jpg" alt="" class="src">
                </div>
                <!-- 轮播元素2 -->
                <div class="glide__slide">
                    <!-- 自定义轮播的内容 -->
                    <div class="slide-caption left">
                        <!-- 大标题 -->
                        <h1>797</h1>
                        <h3>Hello World!</h3>
                        <button class="explore-btn">点击开启</button>
                    </div>
                    <!-- 图片上方遮罩灰色使文字显示清晰 -->
                    <div class="backdrop"></div>
                    <!-- 轮播图片 -->
                    <img src="images/glide-02.jpg" alt="" class="src">                        
                </div>    
                <!-- 轮播元素3 -->
                <div class="glide__slide">
                    <!-- 自定义轮播的内容 -->
                    <div class="slide-caption left">
                        <!-- 大标题 -->
                        <h1>797</h1>
                        <h3>Hello World!</h3>
                        <button class="explore-btn">点击开启</button>
                    </div>
                    <!-- 图片上方遮罩灰色使文字显示清晰 -->
                    <div class="backdrop"></div>
                    <!-- 轮播图片 -->
                    <img src="images/glide-03.jpg" alt="" class="src">                        
                </div>         
                <!-- 轮播元素4 -->
                <div class="glide__slide">
                    <!-- 自定义轮播的内容 -->
                    <div class="slide-caption left">
                        <!-- 大标题 -->
                        <h1>797</h1>
                        <h3>Hello World!</h3>
                        <button class="explore-btn">点击开启</button>
                    </div>
                    <!-- 图片上方遮罩灰色使文字显示清晰 -->
                    <div class="backdrop"></div>
                    <!-- 轮播图片 -->
                    <img src="images/glide-04.jpg" alt="" class="src">                        
                </div>                     
            </div>
        </div>
        <!-- 切换轮播的按钮 -->
        <div class="glide__arrows" data-glide-el="controls">
            <!-- 上一张下一张按钮 -->
            <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
                <
            </button>
            <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
                >
            </button>
        </div>
        <!-- 控制圆点 -->
        <div class="glide__bullets" data-glide-el="controls[nav]">
            <!-- 跳转到第1、第2张图片 -->
            <button class="glide__bullet yuandian" data-glide-dir="=0"></button>
            <button class="glide__bullet yuandian" data-glide-dir="=1"></button>
            <button class="glide__bullet yuandian" data-glide-dir="=2"></button>
            <button class="glide__bullet yuandian" data-glide-dir="=3"></button>
        </div>
    </div>
    <!-- 轮播图 -->

    <!-- 内容区域 -->
    <div class="content-wrapper">
        
        <!-- 网易云播放器 -->
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=0&id=7278981723&auto=0&height=430"></iframe>
        
        <!-- 文本开头 -->
        <section class="theme animation">
            <h1 class="tetile animation">Man Is Here For The Sake of Other Men</h2>
            <h3 class="author animation">Albert Einstein</h3>
            <p class="text animation">
                   Strange is our situation here upon earth. Each of us
                comes for a short visit, not knowing why, yet sometimes
                seeming to divine a purpose.         
            </p>
        </section>
        <!-- 文本开头 -->
        
        <!-- 酒图 -->
        <section class="nine-picture">
            <div class="pictures">
                <!-- picture1 -->
                <div class="picture animation">
                    <img src="images/nine-picture-01.jpg" alt="">
                </div>
                <!-- picture2 -->
                <div class="picture animation">
                    <img src="images/nine-picture-02.jpg" alt="">
                </div>
                <!-- picture3 -->
                <div class="picture animation">
                    <img src="images/nine-picture-03.jpg" alt="">
                </div>
                <!-- picture4 -->
                <div class="picture animation">
                    <img src="images/nine-picture-04.jpg" alt="">
                </div>
                <!-- picture5 -->
                <div class="picture animation">
                    <img src="images/nine-picture-05.jpg" alt="">
                </div>
                <!-- picture6 -->
                <div class="picture animation">
                    <img src="images/nine-picture-06.jpg" alt="">
                </div>
                <!-- picture7 -->
                <div class="picture animation">
                    <img src="images/nine-picture-07.jpg" alt="">
                </div>
                <!-- picture8 -->
                <div class="picture animation">
                    <img src="images/nine-picture-08.jpg" alt="">
                </div>
                <!-- picture9 -->
                <div class="picture animation">
                    <img src="images/nine-picture-09.jpg" alt="">
                </div>
            </div>
        </section>
        <!-- 酒图 -->

        <!-- 过渡图片1 -->
        <section class="transition-picture section-bj">
            <div class="pictures">
                <div class="picture animation">
                    <img src="images/transition-picture-01.jpg" alt="">
                </div>
                <div class="picture animation">
                    <img src="images/transition-picture-02.jpg" alt="">
                </div>
            </div>
        </section>
        <!-- 过渡图片1 -->

        <!-- 文本图片混排 -->
        <section class="content">     
            <div class="mixed-rows">
                <div class="mixed-row">
                    <p class="text animation">
                        From the standpoint of daily life, however, there is one thing we do know that man is here for the sake of other men — above all for those upon whose smile
                    </p>
                    <img class="animation" src="images/mixed-rows-01.jpg" alt="">
                </div>
                <div class="mixed-row">
                    <img class="animation" src="images/mixed-rows-02.jpg" alt="">
                    <p class="text animation">
                        and well-being our own happiness depends, and also for the countless unknown souls with whose fate we are connected by a bond of sympathy.
                    </p>
                </div>
                <div class="mixed-row">
                    <p class="text animation">
                        Many times a day I realize how much my own outer and inner life is built upon the labors of my fellow men, both living and dead, and how earnestly I must 
                    </p>
                    <img class="animation" src="images/mixed-rows-03.jpg" alt="">
                </div>
                <!-- <div class="mixed-row">
                    <img src="images/IMG_0581.jpg" alt="">
                </div>
                <div class="mixed-row text">
                    and well-being our own happiness depends, and also for the countless unknown souls with whose fate we are connected by a bond of sympathy.
                </div>
                <div class="mixed-row text">
                    My peace of mind is often troubled by the depressing sense that I have borrowed too heavily from the work of other men.
                </div>
                <div class="mixed-row">
                    <img src="images/IMG_0581.jpg" alt="">
                </div> -->
            </div>    
        </section>
        <!-- 文本图片混排 -->

        <!-- 过渡图片2 -->
        <section class="transition-picture section-bj">
            <div class="pictures">
                <div class="picture animation">
                    <img src="images/transition-picture-03.jpg" alt="">
                </div>
                <div class="picture animation">
                    <img src="images/transition-picture-04.jpg" alt="">
                </div>
            </div>
        </section>
        <!-- 过渡图片2 -->      

        <!-- End文本 -->
        <section class="end-text">
            <p class="text animation">
                exert myself in order to give in return as much as I have received. Many times a day I realize how much my own outer and inner life is built upon the labors of my fellow men, both living and dead, and how earnestly I must exert myself in order to give in return as much as I have received.         
            </p>
            <p class="animation">End...</p>
        </section>
        <!-- End文本 -->

    </div>
    <!-- 内容区域 -->

    <!-- 版权 -->
    <footer class="copyright"> 

        <!-- 底部菜单 -->
        <div class="footer-menus">

            <!-- 联系方式 -->
            <div class="contact-information">
                <p class="contact-me animation">
                    <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=DHZlb2RpYj08PTpMamN0YW1lYCJvY2E" target="_self">Email: zichen1016&#64;fox&#109;&#97;&#105;&#108;&#46;&#99;&#111;&#x6d;</a> 
                </p>
            </div>
            <!-- 联系方式 -->

            <!-- 版权信息 -->            
            <p class="rights">
                Copyright &copy; 2020-2022 ZichenYang. All rights reserved.
            </p>
            <!-- 版权信息 -->

            <!-- 返回顶部按钮 -->
            <div class="scrollToTop">
                <a href="#home"><i class="fas fa-chevron-up"></i></a>
            </div>
            <!-- 返回顶部按钮 -->

        </div>

    </footer>
    <!-- 版权 -->

    <!-- 轮播组件初始化 -->
    <script src="libs/anime/anime.min.js"></script>
    <script src="libs/glide/glide.min.js"></script>
    <script src="libs/smooth-scroll/smooth-scroll.polyfills.min.js"></script>
    <script src="index.js"></script>
</body>
</html>
